<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="form-wrapper">
				<u-form-item label="课程名称" prop="name">
					<u-input type="text" placeholder="请填写" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="userData.name" :disabled="true"></u-input>
				</u-form-item>
				<u-form-item label="补卡时间" prop="date" right-icon="arrow-right" :rightIconStyle="{color: '#888', fontSize: '32rpx'}">
					<view class="u-input__input" :style="{color: formData.date ? '#333333' : '#999999'}" @click="dateShow = true">{{ formData.date ? formData.date : '请选择'  }}</view>
				</u-form-item>
				<u-form-item label="补卡原因" prop="cause">
					<u-input type="text" placeholder="请填写" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="userData.cause" :disabled="true"></u-input>
				</u-form-item>
				<!-- 请选择补卡时间 -->
				<u-calendar v-model="dateShow" mode="date" :safe-area-inset-bottom="true" toolTip="请选择补卡时间" @change="dateChange"></u-calendar>
			</view>
		</u-form>
		<view class="form-footer">
			<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">保存信息</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					date: '',
					cause: '',
				},
				dateShow: false,
			}
		},
		methods: {
			// 请选择补卡时间
			dateChange(e) {
				this.formData.date = e.result
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0 150rpx;
		background: #F6F6F6;
	}
	.form-wrapper {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		&__title {
			margin-bottom: 10rpx;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #333333;
		}
		/deep/ .u-form-item {
			padding: 10rpx 30rpx;
			font-size: 26rpx;
		}
		/deep/ .u-input__input {
			text-align: right;
			font-size: 26rpx;
		}
		/deep/ .u-input__textarea {
			padding: 15rpx 0;
			line-height: 40rpx;
			box-sizing: border-box;
		}
		/deep/ .u-list-item {
			background: #FFFFFF;
		}
	}
	.form-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		padding: 30rpx 24rpx;
	}
</style>